<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>制作简单动画效果</title> 
<script src="jquery-2.1.1.js"></script>

<style type="text/css">
	#book1{
		width: 50px;
		height: 50px;
		position: relative;
		background: red;
		left: 5px;
	}
	#book2{
		width: 50px;
		height: 50px;
		position: relative;
		background: yellow;
		top:100px;
		left: 5px;
	}

</style>

<script type="text/javascript"> 
 	
$(function() {
	//.animate( properties [, duration ] [, easing ] [, complete ] )
	$('#clickme').click(function() {
		$('#book1').animate({
			left: '+=100px'
		}, 1000, function() {
			$('#book2').animate({
				left: '+=100px',
			}, 2000)
		})
	});

// $('#book1')
// 	.animate({
// 		left: '100px'
// 	}, 1000)
// 	.animate({
// 		width: '200px',
// 		height: '200px'
// 	}, 3000)

})
</script>
</head> 
<body> 

<button  type="button" id="clickme">点击我</button>
<img id="book1" />
<img id="book2" />

</body> 
</html> 
